<!DOCTYPE html>
<html lang="en">
<head>
    <title>{{title}}</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="{{ROOT}}/images/favicon.ico">
    <link rel="stylesheet" type="text/css" href="{{ROOT}}/css/bootstrap.css" />
    <link rel="stylesheet" type="text/css" href="{{ROOT}}/css/lhh_lib.css" />
    <link rel="stylesheet" type="text/css" href="{{ROOT}}/css/zh_tab.css" />
    <link rel="stylesheet" type="text/css" href="{{ROOT}}/css/bootstrap-datetimepicker.css" />
    <!-- HTML5 shim, for IE6-8 support of HTML5 elements. All other JS at the end of file. -->
    <!--[if lt IE 9]>
    <script type="text/javascript" src="{{ROOT}}/js/html5shiv.js"></script>
    <![endif]-->

</head>
<body class="content">
    <div class="row _lhh_breadcrumb MB10 visible-lg">
        <ul class="breadcrumb pull-left">
            <li><a href="index.html">首页</a></li>
            <li class="active">电站损耗分析</li>
        </ul>
        <div class="p-rel">
            <div class="_lhh_breadcrumb-more MR15">
                <!--电子时钟 begin-->
                <include file="{{ROOT}}/controllers/include/clock.html" dataType="html"></include>
                <!--电子时钟 end-->
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-mod-12">
            <div class="page-header">
                <div class="ML10 MT10">
                    <label class="MR5">统计方式</label>
                    <select type="select" class="form-control">
                        <option>按日统计</option>
                        <option>按月统计</option>
                    </select>
                    <label class="MR5 ML30">日期</label>
                    <input size="16" type="text" value="2012-06-15 14:45" readonly class="form_datetime form-control">
                    <button type="submit" class="btn page-header-btn ML30">查询</button>
                </div>
            </div>
        </div>
    </div>
    <div class="row MB30">
        <div class="col-md-12 MT20">
            <div class="echarts" style="height: 400px;width:100%;" id="echarts-column-chart"></div>
        </div>
    </div>
</body>
</html>


<script type="text/javascript" src="{{ROOT}}/js/highstock.js"></script>
<script type="text/javascript" src="{{ROOT}}/js/bootstrap-datetimepicker.js"></script>
<script type="text/javascript" src="{{ROOT}}/js/datetimepicker-custom.js"></script>



<script type="text/javascript">
    LAMJS.main(function(){
        'use strict';
        var System=this;

        function highstock(){
            var seriesOptions = [],
                    seriesCounter = 0,
                    names = ['MSFT', 'AAPL'];
            $.each(names, function (i, name) {
                $('#echarts-column-chart').highcharts({
                    chart: {
                        height: 500,
                        plotBackgroundColor: null,
                        plotBorderWidth: null,
                        plotShadow: false
                    },
                    title: {
                        text: '2015年08月31日 电站损耗分析',
                        style:{
                            fontFamily:'SimHei'
                        }
                    },
                    tooltip: {
                        pointFormat: '{series.name}: <b>{point.percentage:.1f}kw/h</b>'
                    },
                    credits: {
                        enabled:false    //不显示版权标签
                    },
                    legend: {
                        align: 'center',
                        verticalAlign: 'bottom',
                        borderWidth: 2,
                        symbolRadius:20,
                        symbolWidth:10,
                        symbolHeight:10
                    },
                    plotOptions: {
                        pie: {
                            allowPointSelect: true,
                            cursor: 'pointer'
                        }
                    },
                    plotOptions: {
                        pie: {
                            allowPointSelect: true,
                            cursor: 'pointer',
                            showInLegend: true
                        }
                    },
                    series: [{
                        type: 'pie',
                        name: 'Browser share',
                        data: [
                            ['上网电量（万kw/h）',   75.0],
                            ['光伏方阵吸收损耗（万kw/h）', 14.8],
                            ['逆变器损耗（万kw/h）',    4.5],
                            ['集电线路及箱变损耗（万kw/h）',     4.2],
                            ['升压站损耗（万kw/h）',   6.7]
                        ]
                    }]
                });

            });

        }




        $(window).resize(function() {
            highstock();
        }).trigger('resize');


        function initDate(){
            $(".form_datetime").datetimepicker({format: 'yyyy-mm-dd hh:ii'});
        }


        $(function(){
            initDate();
        });



    });
</script>


